<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>登录 | 西安三星 SW 综合系统 Samsung XIAN SW Comprehensive System</title>
	<link rel="icon" href="${ctx}/resource/v2/img/favicon.ico">
    <link href="${ctx}/resource/v2/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/resource/v2/css/font-awesome.min.css" rel="stylesheet">

    <link href="${ctx}/resource/v2/css/animate.min.css" rel="stylesheet">
    <link href="${ctx}/resource/v2/css/style.css" rel="stylesheet">
    <link href="${ctx}/resource/v2/css/cfe.css" rel="stylesheet">
	
	<!-- 给form的input输入框天添加icon图标 -->
	<style type="text/css">
		.icon-position{
			position: relative;
			top: -12px;
			width: 15px;
			height: 15px;
		}
		.div-position{
			display: inline-block;
			width: 280px;		
		}
	</style> 
</head> 

<body class="gray-bg">

    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <!-- login -->
        <div id="login-div" class="animated fadeInDown">
            <div>
                <h2 class="logo-name"><img alt="logo" src="${ctx}/resource/v2/img/favicon.ico"></h2>
            </div>
            <h3>欢迎来到 Bone</h3>
             
            <p>登录后，可以看到更多的你想不到的东西</p>
            <form class="m-t" role="form" id="loginForm">
            	<input type="hidden" name="callback" value="${callback }">
                <div class="form-group">
                	<i class="fa fa-lg  fa-user features-icon-small icon-position"></i> 
                	<div class="div-position">
                    	<input name="uid" id="loginuid" type="text" class="form-control" placeholder="SingleId" required="" maxlength="20" minlength="5">
                	</div> 
                </div>
                <div class="form-group">
                	<i class="fa fa-lg  fa-key features-icon-small icon-position"></i> 
                	<div class="div-position">
                    	<input name="password" id="loginpwd" type="password" class="form-control" placeholder="Password" required="" maxlength="15" minlength="5">
                    </div>  
                </div>
                <div class="div-position pull-right">
               		<input type="button" class="btn btn-primary block full-width m-b" id="loginBtn" onkeypress="if(event.keyCode==13) {btn.click();return false;}" value="登录"/>
               	</div> 
               	<div class="div-position pull-right">
                	<a id="forget"><small>忘记密码？</small></a>
				
                	<p class="text-muted text-center"><small>亲，还没有账号？</small></p>
                
                	<a class="btn btn-sm btn-white btn-block" id="regist">那就创建一个账户吧！</a>
                </div>
            </form>
            <div class="div-position pull-right">
            	<p class="m-t"> <small>我们的前端框架基于 Bootstrap 3 &copy; 2016</small> </p>
            </div>
        </div>
        
        <!-- regist -->
        <div id="regist-div" class="animated fadeInDown">
          	<div>
                <h2 class="logo-name"><img alt="logo" src="${ctx}/resource/v2/img/favicon.ico"></h2>
            </div>
            <h3>注册 Bone</h3>
            <form class="m-t" role="form" id="registForm">
                <div class="form-group">
	                <i class="fa fa-lg  fa-user features-icon-small icon-position"></i> 
                	<div class="div-position">
	                    <input type="text" id="reguid" name="uid" class="form-control" placeholder="SingleId" maxlength="20" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\.]/g,'')" required="required">
	                </div>
                </div>
                <div class="form-group">
                	<i class="fa fa-lg fa-drupal features-icon-small icon-position"></i> 
                	<div class="div-position">
                    	<input type="text" id="regname" name="name" class="form-control" placeholder="Name" maxlength="20" required="required">
                    </div>
                </div>
                <div class="form-group">
                	<i class="fa fa-lg  fa-key features-icon-small icon-position"></i> 
                	<div class="div-position">
                    	<input type="password" id="regpwd" name="password" class="form-control" placeholder="Password" maxlength="15" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <i class="fa fa-lg  fa-envelope  features-icon-small icon-position"></i> 
                	<div class="div-position">
                    	<input type="email" id="regemail" name="email" class="form-control" placeholder="Email" maxlength="30" required="required">
                    </div>
                </div>
                <div class="div-position pull-right"> 
	                <button type="button" class="btn btn-primary block full-width m-b" id="registBtn">注册</button>
	
	                <p class="text-muted text-center"><small>已经有账户了?</small></p>
	                <a class="btn btn-sm btn-white btn-block" id="login">登录</a>
               	</div>
            </form>
             <div class="div-position pull-right"> 
             	<p class="m-t"> <small>我们的前端框架基于 Bootstrap 3 &copy; 2016</small> </p>
             </div>
        </div>
        
        <!-- forget -->
        <div id="forget-div" class="animated fadeInDown">
          	<div>
                <h2 class="logo-name"><img alt="logo" src="${ctx}/resource/v2/img/favicon.ico"></h2>
            </div>
            <h3>重置密码</h3>
            <form class="m-t" role="form" id="forgetForm">
                <div class="form-group">
               		<i class="fa fa-lg  fa-user features-icon-small icon-position"></i>
	            	<div class="div-position">
	                    <input type="text" id="forgetuid" name="uid" class="form-control" placeholder="SingleId" maxlength="20" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\.]/g,'')" required="required">
	                </div>
	            </div>
                <div class="form-group">
	                <i class="fa fa-lg  fa-key features-icon-small icon-position"></i>
	            	<div class="div-position">
                    	<input type="password" id="forgetpwd" name="password" class="form-control" placeholder="Password" maxlength="15" required="required">
	                </div>
                </div>
                <div class="form-group">
	                <i class="fa fa-lg  fa-envelope  features-icon-small icon-position"></i>
	            	<div class="div-position">
	                    <input type="email" id="forgetemail" name="email" class="form-control" placeholder="Email" maxlength="30" required="required">
	                </div>
                </div>
                <button type="button" class="btn btn-primary block full-width m-b" id="forgetBtn">重置</button>

                <p class="text-muted text-center"><small>又想起密码了?</small></p>
                <a class="btn btn-sm btn-white btn-block" id="flogin">登录</a>
            </form>
             <p class="m-t"> <small>我们的前端框架基于 Bootstrap 3 &copy; 2016</small> </p>
        </div>
        
        
    </div>
 
	<input id="contextPath" type="hidden" value="${ctx}">
    <!-- Mainly scripts -->
    <script src="${ctx}/resource/v2/js/jquery-2.1.1.js"></script>
    <script src="${ctx}/resource/v2/js/bootstrap.min.js"></script>
    <script src="${ctx}/resource/v2/layer/layer.js"></script>
    <script src="${ctx}/resource/v2/js/common.js"></script>
    <script src="${ctx}/resource/v2/js/jquery.xajax.js"></script>
	<script type="text/javascript">
	$(function(){
		
		/* 表单校验事件   */
		$("#loginuid").blur(function(){
			checkUid($("#loginuid"));
		});
		$("#loginpwd").blur(function(){
			checkPwd($("#loginpwd"));
		});
		$("#reguid").blur(function(){
			checkUid($("#reguid"));
		});
		$("#regname").blur(function(){
			checkName($("#regname"));
		});
		$("#regpwd").blur(function(){
			checkPwd($("#regpwd"));
		});
		$("#regemail").blur(function(){
			checkEmail($("#regemail"));
		});
		$("#forgetuid").blur(function(){
			checkUid($("#forgetuid"));
		});
		$("#forgetpwd").blur(function(){
			checkPwd($("#forgetpwd"));
		});
		$("#forgetemail").blur(function(){
			checkEmail($("#forgetemail"));
		});
		/* 添加回车登录事件 */
		$("#loginuid,#loginpwd").keydown(function(e){
			 var e = e || event,
			 keycode = e.which || e.keyCode;
			 if (keycode==13) {
			  $("#loginBtn").trigger("click");
			 }
		});
		 
		/* 用户登录事件   */
		$("#loginBtn").click(function() {
			var index = parent.layer.getFrameIndex(window.name);
			var load = layer.load(1);
			
			if(!checkUid($("#loginuid")) || !checkPwd($("#loginpwd"))){
				layer.close(load);
				return;
	       	}
			
            $.ajax({
                type: "post",
                url: "${ctx}/user/login.do",
                data: $("#loginForm").serialize(),
                dataType: "json",
                success: function(data) {
                    if (data.flag) {
                        parent.layer.msg(data.msg);
                        if(!data.callback) { //直接登录
							parent.location.href = '${ctx}/center/home/index.html'; 
							parent.layer.close(index);
                        } else { //有操作登录
                        	location.href = data.callback;
                        }
                    } else {
                        layer.close(load);
                        parent.layer.msg(data.msg);
                    }
                },
                error: function(data) {
                    layer.close(load);
                	parent.layer.msg("请求出错啦！");
                }
            });
		});
		/* 添加回车注册事件 */
		$("#reguid,#regname,#regpwd,#regemail").keydown(function(e){
			 var e = e || event,
			 keycode = e.which || e.keyCode;
			 if (keycode==13) {
			  $("#registBtn").trigger("click");
			 }
		});
		  
		
		/* 用户提交注册事件  */
		$("#registBtn").click(function(){
			var index = parent.layer.getFrameIndex(window.name);
			var load = layer.load(1);
			
			if(!checkUid($("#reguid")) || !checkName($("#regname")) || !checkPwd($("#regpwd")) || !checkEmail($("#regemail")) ){
				layer.close(load);
				return;
	       	}
			
	        $.ajax({
	            type: "post",
	            url: "${ctx}/user/regist.do",
	            data: $("#registForm").serialize(),
	            dataType: "json",
	            success: function(data) {
	                if (data.flag) {
	                    parent.layer.msg(data.msg);
						parent.location.href = '${ctx}/loginPage.do'; 
						parent.layer.close(index);
	                } else {
	                    layer.close(load);
	                    parent.layer.msg(data.msg);
	                }
	            },
	            error: function(data) {
	                layer.close(load);
	            	parent.layer.msg("请求出错啦！");
	            }
	        });
		});
		
		/* 找回密码提交事件  */
		$("#forgetBtn").click(function(){
			var index = parent.layer.getFrameIndex(window.name);
			var load = layer.load(1);
			
			if(!checkUid($("#forgetuid")) || !checkPwd($("#forgetpwd")) || !checkEmail($("#forgetemail")) ){
				layer.close(load);
				return;
	       	}
			
	        $.ajax({
	            type: "post",
	            url: "${ctx}/user/password/reset.do",
	            data: $("#forgetForm").serialize(),
	            dataType: "json",
	            success: function(data) {
					layer.close(load);
					parent.layer.msg(data.msg);
	                if (data.flag) {
	                    $("#flogin").trigger("click");
	                }
	            },
	            error: function(data) {
	                layer.close(load);
	            	parent.layer.msg("请求出错啦！");
	            }
	        });
		});
		
		/* 注册跳转   */
		$("#regist").click(function(){
			layer.closeAll();
			$("#login-div").hide();
			$("#forget-div").hide();
			$("#regist-div").show();
		});
		/* 忘记密码跳转   */
		$("#forget").click(function(){
			layer.closeAll();
			$("#login-div").hide();
			$("#regist-div").hide();
			$("#forget-div").show();
		});
		/* 登录跳转   */
		$("#login").click(function(){
			layer.closeAll();
			$("#login-div").show();
			$("#forget-div").hide();
			$("#regist-div").hide();
		});
		/* 登录跳转   */
		$("#flogin").click(function(){
			layer.closeAll();
			$("#login-div").show();
			$("#forget-div").hide();
			$("#regist-div").hide();
		});
	});
	</script>
</body>

</html>